<template>
	<block>
		<scroll-view scroll-y style="height: 100vh">
			<view class="top" style="
		            background: url(https://636c-cloud1-5gpfcg4741901b6a-1308173748.tcb.qcloud.la/20220415162602.png?sign=f4b0f864510825c30c640bd5525dffa3&t=1650290041) no-repeat -50px -50px;
		        ">
		
				<view class="tip-box" v-if="!userid">
					 <text >您尚未登录，点我</text>
					 <text class="color-btn" style="color: #ff8080;" @click="goLogin">登录</text>
				</view>
				<view v-else>
					<view class="text">
						<text>欢迎您~</text>
						<text style="color:#F76260;font-size: large;">{{userName}}</text>
					</view>
				</view>
			</view>
			<navigator url="/pages/orderDetails/orderDetails" class="item">
				<view class="left">我的订单</view>
				<view class="right">
					<text>查看全部订单</text>
					<image src="/static/images/my_order.png"></image>
				</view>
			</navigator>
			<view class="icon">
				<navigator url="/pages/orderDetails/orderDetails?type=1" hover-class="none">
					<image src="/static/images/pending_payment.png" mode="aspectFit"></image>
					<text>待审核</text>
				</navigator>
				<navigator url="/pages/orderDetails/orderDetails?type=2" hover-class="none">
					<image src="/static/images/pending_delivery.png" mode="aspectFit"></image>
					<text>未通过</text>
				</navigator>
				<navigator url="/pages/orderDetails/orderDetails?type=3" hover-class="none">
					<image src="/static/images/completed.png" mode="aspectFit"></image>
					<text>已完成</text>
				</navigator>
			</view>
			<navigator url="/pages/collection/collection" class="item">
				<view class="left">我的收藏</view>
				<view class="right">
					<image src="/static/images/my_order.png"></image>
				</view>
			</navigator>
			<navigator url="/pages/addressList/addressList" class="item">
				<view class="left">收货地址管理</view>
				<view class="right">
					<image src="/static/images/my_order.png"></image>
				</view>
			</navigator>
		
			<navigator @tap="contact" url="#" class="item">
				<view class="left">客服联系方式</view>
				<view class="right">
					<image src="/static/images/my_order.png"></image>
				</view>
			</navigator>
		</scroll-view>
	</block>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				showModalStatus: false,
			
					userid:'',
					userName:'',
				
			};
		},
		onLoad: function() {
			let that=this
			uni.getStorage({
				key:'userid',
				success:function(res){
					console.log(res)
					that.userid=res.data
				}

			})
			uni.getStorage({
				key:'userName',
				success:function(res){
					that.userName=res.data

				}
			})
			
		},
		methods: {
			contact: function(e) {
				uni.makePhoneCall({
					phoneNumber: '18375830098'
				});
			},
			goLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},

		}
	};
</script>

<style>
	.top {
		height: 40vh;
		border-bottom: 3px solid #dedede;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top .text {
		text-align: center;
		font-size: 15px;
		font-weight: 600;
		color: #333333;
	}

	.item {
		display: flex;
		line-height: 40px;
		border-bottom: 1px solid #dedede;
		background: #fff;
		padding: 0 16px;
	}

	.item .left {
		flex: 1 0 50%;
		font-size: 14px;
		color: #333333;
	}

	.item .right {
		flex: 1 0 50%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.item image {
		width: 8px;
		height: 15px;
	}

	.item text {
		font-size: 12px;
		color: #999999;
		padding-right: 10px;
	}

	.icon {
		border-bottom: 1px solid #ededed;
		display: flex;
		padding: 12px 0;
	}

	.icon image {
		display: block;
		width: 30px;
		height: 30px;
		margin: 0 auto;
		padding-top: 10px;
	}

	.icon text {
		display: block;
		text-align: center;
		width: 100%;
		font-size: 14px;
		color: #333;
		padding-top: 10px;
	}

	.icon navigator {
		flex: 1 0 25%;
	}
	.tip-box{
		font-size: 15px;
		font-weight: 600;
		color: #555555;
		text-align: center;
	}
</style>
